<template>
  <basic-dialog
    :visible="visible"
    :title="'关联商品'"
    :show-footer="false"
    :show-close="false"
    :width="'60%'"
  >
    <div class="form-container">
      <el-form ref="queryData" :model="queryData" label-width="80px">
        <el-row type="flex" :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品分类" prop="categoryPath">
              <el-input
                v-model="queryData.categoryPath"
                placeholder="请输入商品分类"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="SPU编码" prop="spuNo">
              <el-input
                v-model="queryData.spuNo"
                placeholder="请输入SPU编码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="SKU编码" prop="skuNo">
              <el-input
                v-model="queryData.skuNo"
                placeholder="请输入SKU编码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" class="row-bg" justify="space-between">
          <el-col :span="8">
            <el-form-item label="商品名称" prop="productName">
              <el-input
                v-model="queryData.productName"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="handleQueryData(1)">查询</el-button>
          <el-button @click="handleResetData('queryData')">清空</el-button>
          <el-button
            v-preventReClick
            type="primary"
            ghost
            @click="handleBatchAssociate"
            >批量关联</el-button
          >
          <el-button ghost @click="handleCloseDialog">取消</el-button>
        </el-row>
      </el-form>
    </div>
    <sku-table
      :loading="tableLoading"
      :data-source="tableData"
      :columns="tableColumns"
      :showSelectCol="true"
      :showPagination="true"
      :pagination="pagination"
      :total="total"
      :checkSelectable="isDisabledSelect"
      :selectionChange="handleSelectionChange"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import SkuTable from '@/components/skusTable';
import { ApiRequest } from '@api/basePage';
import { isResponseSuccess } from '@/utils/bizUtils';
import { getBtnsId } from '@/libs/btnsPermission';

export default {
  name: 'AssociateProductDialog',
  components: {
    BasicDialog,
    SkuTable
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    pageType: {
      type: String
    }
  },
  data () {
    return {
      tableLoading: false,
      // 批量关联skulist
      selectRows: [],
      queryData: {
        spuNo: '', // spu编码
        productName: '', // 商品名称
        categoryPath: '', // 商品分类
        skuNo: '' // SKU编码
      },
      total: 0,
      pagination: {
        pageSize: 500,
        pageNum: 1
      },
      tableData: [],
      tableColumns: [
        {
          title: '商品名称',
          key: 'productName'
        },
        {
          title: 'SPU编码',
          key: 'spuNo'
        },
        {
          title: '商品分类',
          key: 'categoryPath'
        },
        {
          title: 'SKU编码',
          key: 'skuNo'
        },
        {
          title: '规格参数',
          key: 'specDetail'
        },
        {
          title: '品牌',
          key: 'brandName'
        }
      ],
      apiObj: {
        addUrl: '/sysback/prepareCheckStandard/getPreparedSkuPager',
      }
    };
  },

  computed: {
    visible () {
      return this.dialogVisible;
    }
  },
  methods: {
    handleQueryData (nowPage) {
      if (nowPage) {
        this.pagination.pageNum = nowPage;
      }
      const { pageNum, pageSize } = this.pagination;
      const pageData = {
        nowPage: pageNum,
        pageShow: pageSize
      };
      let curBtnId = getBtnsId('关联商品');
      sessionStorage.setItem('buttonId', curBtnId);
      this.tableLoading = true;
      ApiRequest(
        this.apiObj.addUrl,
        'post',
        { ...this.queryData, ...pageData },
        false
      )
        .then((res) => {
          this.tableLoading = false;
          if (isResponseSuccess(res)) {
            const { results, totalNum } = res.retData;
            this.tableData = results;
            this.total = totalNum;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 分页状态变更回调
    handlePageChange (pageNum) {
      this.pagination.pageNum = pageNum;
      this.handleQueryData();
    },
    // 分页状态变更回调
    handlePageSizeChange (pageSize) {
      this.pagination.pageSize = pageSize;
      this.handleQueryData();
    },
    handleSelectionChange (rows) {
      this.selectRows = rows;
    },
    handleResetData (formName) {
      this.$refs[formName].resetFields();
    },
    /* 表格勾选是否禁用判断方法 */
    isDisabledSelect ({ row }) {
      return !row.auditingRecordNo;
    },
    // 批量关联
    handleBatchAssociate () {
      if (this.selectRows.length === 0) {
        return this.$message.warning('请选择要关联的商品');
      }
      let skuList = this.selectRows.map((item) => {
        return item.skuNo;
      });
      this.$emit('hide-handler', skuList);
    },
    // 清空已勾选商品
    handleEmptySkus () {
      this.selectRows = [];
      this.tableData = [];
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('hide-handler');
    }
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
